<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Popover 弹出框</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.el-popover__title {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">与Tooltip相似，Popover也是基于ElPopper的构建。 因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。</p>
	<p class="desc">trigger 属性被用来决定 popover 的触发方式，支持的触发方式： hover、click、focus 或 contextmenu。 如果你想手动控制它，你可以设置 v-model:visible。</p>
	<el-popover placement="top-start" :title="title" :width="200" trigger="hover">
		<el-image style="" :src="imagePath" fit="full"></el-image>
		<template #reference>
			<el-button>悬停激活</el-button>
		</template>
	</el-popover>
	
	<el-popover placement="bottom" title="Title" :width="200" trigger="click" content="文本内容">
		<template #reference>
			<el-button>点击激活</el-button>
		</template>
	</el-popover>
	
	<el-popover ref="popover" placement="right" title="Title" :width="200" trigger="focus" content="文本内容">
		<template #reference>
			<el-button>重点来激活</el-button>
		</template>
	</el-popover>
	
	<el-popover ref="popover" title="Title" :width="200" trigger="contextmenu" content="文本内容">
		<template #reference>
			<el-button>快捷菜单激活</el-button>
		</template>
	</el-popover>
	
	<el-popover :visible="visible" placement="bottom" title="Title" :width="200" content="文本内容">
		<template #reference>
			<el-button @click="visible = !visible">手动激活</el-button>
		</template>
	</el-popover>
	
	<el-divider content-position="left">虚拟触发</el-divider><!-- =============================================================== -->
	<p class="desc">像 Tooltip一样，Popover 可以由虚拟元素触发，这个功能就很适合使用在触发元素和展示内容元素是分开的场景。</p>
	<p class="desc">通常我们使用 #reference 来放置我们的触发元素， 用 triggering-element API，您可以任意设置您的触发元素 但注意到触发元素应该是接受 mouse 和 keyboard 事件的元素。</p>
	<el-button @click="onClickOutside">Click me</el-button>
	<el-popover :visible="visible2" trigger="click" title="With title">
		<span> Some content </span>
		<template #reference>
			<span>绑定位置</span>
		</template>
	</el-popover>
	
	<el-divider content-position="left">内容可扩展</el-divider><!-- =============================================================== -->
	<p class="desc">可以在 Popover 中嵌套其它组件， 以下为嵌套表格的例子。</p>
	<p class="desc">利用插槽取代 content 属性</p>
	<div style="display: flex; align-items: center">
		<el-popover placement="bottom" :width="400" trigger="click" @show="showPop" @hide="hidePop">
			<template #reference>
				<el-button style="margin-right: 16px">点击加载表格</el-button>
			</template>
			<el-table :data="gridData">
				<el-table-column width="150" property="date" label="日期" ></el-table-column>
				<el-table-column width="100" property="name" label="姓名" ></el-table-column>
				<el-table-column width="300" property="address" label="地址" ></el-table-column>
			</el-table>
		</el-popover>
	
		<el-popover :width="300" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
			<template #reference>
				<el-avatar src="https://avatars.githubusercontent.com/u/72015883?v=4" /></el-avatar>
			</template>
			<template #default>
				<div class="demo-rich-conent" style="display: flex; gap: 16px; flex-direction: column">
					<el-avatar :size="60" src="https://avatars.githubusercontent.com/u/72015883?v=4" style="margin-bottom: 8px" /></el-avatar>
					<div>
						<p class="demo-rich-content__name" style="margin: 0; font-weight: 500"> Element Plus </p>
						<p class="demo-rich-content__mention" style="margin: 0; font-size: 14px; color: var(--el-color-info)"> @element-plus </p>
					</div>
					<p class="demo-rich-content__desc" style="margin: 0"> Element Plus, a Vue 3 based component library for developers, designers and product managers </p>
				</div>
			</template>
		</el-popover>
	</div>
	
	<el-divider content-position="left">嵌套操作</el-divider><!-- =============================================================== -->
	<p class="desc">当然，你还可以嵌套操作， 它比使用dialog更加轻量。</p>
	<el-popover v-model:visible="visible3" placement="top" :width="160">
		<template #reference>
			<el-button @click="visible3 = true">Delete</el-button>
		</template>
		<p>Are you sure to delete this?</p>
		<div style="text-align: right; margin: 0">
			<el-button size="small" text @click="visible3 = false">cancel</el-button>
			<el-button size="small" type="primary" @click="visible3 = false">confirm</el-button>
		</div>
	</el-popover>
	
	<el-divider content-position="left">指令</el-divider><!-- =============================================================== -->
	<p class="desc">您可以使用指令性方式弹出窗口，但这种方法不再推荐 ，因为这使得应用程序变得复杂， 您可以参考虚拟触发来实现一样的效果。</p>
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			visible: false,
			visible2: false,
			visible3: false,
			title: "与Tooltip相似，Popover也是基于ElPopper的构建。 因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。",
			imagePath: "../static/image/element-logo.png",
			
			gridData: [
				{date: '2016-05-02', name: 'Jack', address: 'New York City', },
				{date: '2016-05-04', name: 'Jack', address: 'New York City', },
				{date: '2016-05-01', name: 'Jack', address: 'New York City', },
				{date: '2016-05-03', name: 'Jack', address: 'New York City', },
			],
			
		}
	},
	methods:{
		onClickOutside(){
			console.log(3333)
			this.visible2 = !this.visible2;
		},
		showPop(){
			console.log("showPop：显示时触发");
		},
		hidePop(){
			console.log("hidePop：隐藏时触发");
		},
		
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");
</script>
</html>